<template>
  <div class="setting-list">
    <div>
      <label @click="optionIndex = 0">
        <input type="radio" name="set" checked />
        <div>
          <img />
          <div>
            <div>收银机设置</div>
            <div>基础设置、界面设置</div>
          </div>
        </div>
      </label>
      <label @click="optionIndex = 1">
        <input type="radio" name="set" />
        <div>
          <img />
          <div>
            <div>收款方式设置</div>
            <div>微信、支付宝、系统收款、POS机收款...</div>
          </div>
        </div>
      </label>
      <label @click="optionIndex = 2">
        <input type="radio" name="set" />
        <div>
          <img />
          <div>
            <div>充值设置</div>
            <div>活动套餐、市场股东办理</div>
          </div>
        </div>
      </label>
      <label @click="optionIndex = 3">
        <input type="radio" name="set" />
        <div>
          <img />
          <div>
            <div>短信设置</div>
            <div>短信模板</div>
          </div>
        </div>
      </label>
      <label @click="optionIndex = 4">
        <input type="radio" name="set" />
        <div>
          <img />
          <div>
            <div>店员权限设置</div>
            <div>功能管理、角色、权限</div>
          </div>
        </div>
      </label>
    </div>
    <div></div>
    <div>
      <component
        :is="
          [interfaceSettings, payMethods, topUp, letter, permission][
            optionIndex
          ]
        "
      ></component>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue"
import interfaceSettings from "./interface/index.vue"
import payMethods from "./pay-methods/index.vue"
import topUp from "./topUp/index.vue"
import letter from "./letter/index.vue"
import permission from "./permission/index.vue"

const optionIndex = ref(0)

</script>

<style lang="less" scoped>
.setting-list {
  display: grid;
  grid-template-columns: 34.9% .52% 64.58%;
  height: 100%;

  * {
    line-height: 1;
  }

  >div:nth-child(2) {
    background: #ECECEC;
  }

  >div:first-child {
    >label {
      >input {
        display: block;
        width: 0;
        height: 0;
        opacity: 0;
      }

      >div {
        display: flex;
        align-items: center;
        padding: 0 30px;
        height: 140px;
        box-sizing: border-box;

        >img {
          margin-right: 28px;
          width: 64px;
          height: 64px;
        }

        >div {
          >div:first-child {
            margin-bottom: 15px;
            font-size: 28px;
            color: #2E323D;
          }

          >div:last-child {
            font-size: 24px;
            color: #4A5060;
          }
        }
      }

      >input:checked+div {
        background: #F8F8F8;
      }
    }

  }
}
</style>